<%--
  Created by IntelliJ IDEA.
  User: 86155
  Date: 2022/4/11
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>商品介绍信息的添加</title>
</head>
<body>

  商品id<input type="text" id="proId">

  <div id="div1">

  </div>

  <button class="update">添加介绍</button>

  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js" charset="UTF-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js" charset="UTF-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/wangeditor/dist/wangEditor.js" charset="UTF-8"></script>

  <script type="text/javascript">

    const E = window.wangEditor;

    const editor = new E("#div1");

    //设置富文本编辑器的高度。
    editor.config.height = 600;

    //开启debug模式
    editor.config.debug = true;

    <%--editor.config.uploadFileName = "file";--%>
    <%--editor.config.uploadImgServer = '${pageContext.request.contextPath}/fileUpload';--%>

    //自定义上传图片事件
    // editor.config.uploadImgHooks = {
    //   before: function (xhr, editor, files) {
    //
    //   },
    //   success: function (xhr, editor, result) {
    //     console.log("上传成功！");
    //   },
    //   fail: function (xhr , editor, result) {
    //     console.log("上传失败，原因是：" + result);
    //   },
    //   error: function (xhr , editor) {
    //     console.log("上传出错");
    //   },
    //   timeout: function (xhr, editor) {
    //     console.log("上传超时");
    //   },
    //   customInsert: function (insertImg, result, editor) {
    //     // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
    //     // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
    //
    //     // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
    //     var url = result.url;
    //     insertImg(url)
    //
    //     // result 必须是一个 JSON 格式字符串！！！否则报错
    //   }
    // };
    editor.create();

    $(".update").click(function () {
      // editor.txt.html(text);
      $( 'dt:empty' ).remove();
      $( 'dl:empty' ).remove();
      $( 'em:empty' ).remove();
      $( 'label:empty' ).remove();
      $( 'p:empty' ).remove();
      $( 'div:empty' ).remove();


      $("a").remove();
      $("br").remove();
      $("span").remove();


      //2. 获得富文本数据
      var editorData = editor.txt.html();

      var proId=$("#proId").val();
      console.log("表单数据: " + editorData);
      console.log("proId: " + proId);
      var url = "${pageContext.request.contextPath}/editor/"+proId;


      $.ajax({
        type: "put",
        url: "${pageContext.request.contextPath}/editor/" + proId,
        dataType: "html",
        data: {
          "editorData" : editorData
        },
        success: function (result) {
          if (result.data !== null) {
            console.log("data:" + result.data);
            console.log("result:" + JSON.stringify(result));
            //reason：事物的原因
            //result：事物的结果
            //有原因才会有结果
            alert(result.reason);
          }
          else {
            alert(result.reason);
          }
        },
        error:function (result) {
          console.log("111");
        }
      })
    })
  </script>
</body>
</html>
